<template>
    <div id="big" style="width: 100%;">
        <div id="c" style="height: 20%;">
            <el-form ref="form" :model="params">
                <el-container>
                    <el-form-item style="margin-left: 20px">
                        <el-input v-model="params.Name" placeholder="姓名" :clearable="true"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="search">模糊搜索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>
            <el-divider></el-divider>
        </div>

        <div id="a" style="width: 15%;height: 80%;overflow-y: scroll">
            <el-card class="box-card" style="width: 95%;height: 99%;overflow: hidden">
                <el-tree :data="ProjectTypes" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-card>
        </div>

        <div id="b" style="width: 84%;margin-left: 1%;height: 80%;overflow-y: scroll">
            <el-table
                    :data="showData"
                    @row-click="getRow"
                    border>
                <el-table-column
                        prop="id"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        prop="postName"
                        label="岗位">
                </el-table-column>
            </el-table>
            <el-divider></el-divider>
           <el-footer class="case-list-footer">
                <el-pagination
                        style="margin: 10px auto"
                        background
                        layout="total , sizes ,prev, pager, next,jumper"
                        :page-sizes="[5,10,15,20]"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                        @size-change="handleSizeChange"
                >
                </el-pagination>
            </el-footer>
        </div>

    </div>
</template>

<script>

    import empModel from '../../model/wyh/empModel.js'
    //获取数据模型对象
    const em = new empModel();

    export default {
        name: "ProjectTypeBigData",
        data(){
            return{
                pageResult:{},
                ProjectTypes:[],
                showData:[],
                params:{},
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            }
        },
        methods:{
            list(){
                em.list(this.params).then((response)=>{
                    this.ProjectTypes =response.data.data.type
                    this.pageResult =response.data.data.data
                    this.showData=response.data.data.data.records
                })
            },
            search(){
                this.params.page=1
                this.list()
            },
            getRow(row){
                this.$emit("row",row)
            },
            handleIndexChange(index){
                this.params.page = index
                this.list()
            },
            handleSizeChange(size){
                this.params.size = size
                this.list()
            },
            handleNodeClick(data) {
                this.showData=[]
                this.pageResult.records.forEach(i=>{
                    if(i.deptId==data.id){
                        this.showData.push(i);
                    }
                })
            },
        },
        swtch:{

        },
        created() {
            this.list()
        }
    }
</script>

<style scoped>
    #a{
        width: 100px;
        float: left;
    }
    #b {
        width: 1000px;
        float: left;
    }
    #big{
        width: 1200px;
        height: 500px;
    }

</style>
